<template>
	<div class="education-box">
		<Header :title="title"/>
		<div class="div">
			<div v-for="(item,index) in educationData" :key="index">
				<Input :names="item.designation" :infor="item.numval"/>
			</div>
		</div>
		<div class="statusinfor">
			<span>+添加学校</span>
		</div>
		<div class="div">
			<div v-for="(item,index) in inforData" :key="index">
				<Input :names="item.designation" :infor="item.numval"/>
			</div>
		</div>
		<Button :btitle="btitle"/>
	</div>
</template>

<script>
	import Input from '../components/Input.vue'
	import samePerson from '../components/samepreson.vue'
	import Header from '../components/Header.vue'
	import Button from '../components/button.vue'
	
	export default{
		data(){
			return {
				title:'教育档案卡',
				btitle:'保存',
				educationData:[
					{
						designation:'学校',
						numval:'请输入' 
					},
					{
						designation:'层次',
						numval:'请输入' 
					},
					{
						designation:'专业',
						numval:'请输入' 
					},
					{
						designation:'形式',
						numval:'请输入' 
					},
					{
						designation:'毕业日期',
						numval:'请输入' 
					},
					
				],
				inforData:[
					{
						designation:'英语水平',
						numval:'请输入' 
					},
					{
						designation:'其他语种及水平',
						numval:'请输入' 
					},
				]
			}
		},
		components:{
			Input,
			Header,
			Button
		},
	}
</script>

<style scoped>
	.education-box{
		width: 100%;
		height: 100vh;
		background: #F5F2F0;
	}
	.educationtop{
		width: 100%;
		height: 111px;
		background: #fff;
	}
	.alleducation{
		width: 92%;
		height: 100%;
		margin: auto;
		display: flex;
	}
	.educationLest{
		width: 140px;
		height: 90px;
		border-radius: 10px;
		background: #333;
		text-align: center;
		line-height: 90px;
		font-size: 13px;
		margin: 0;
		padding: 0;
		float: left;
	}
	.educationRight{
		width: 165px;
		height: 90px;
		float: right;
	}
	.educationRight span{
		display: inline-block;
	}
	.edit,.approve{
		width: 70px;
		height: 30px;
		border-radius: 10px;
		background:#1177dc;
		color:#fff;
		font-size: 14px;
	}
	.approve{
		background:#ff6600;
	}
	.doneinfor span:nth-child(1){
		width: 118px;
		height: 14px;
		background: #333333;
	}
	.doneinfor span:nth-child(2){
		width: 42px;
		height: 11px;
		border:1px solid #333333;
	}
.statusinfor{
	font-size: 12px;
	color:#CCD6E3;
	width: 95%;
	height: 40px;
	background: #F5F5F5;
	padding-top: 5px;
	padding-left: 5%;
	text-align: center;
	font-size: 14px;
	color:#F15B5C;
	line-height: 30px;
}

	
</style>
